<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>山寨双向绑定</title>
        <style>
            input { width: 100% ; line-height: 30px ;}
        </style>
    </head>
    <body>

        <h3>山寨双向绑定</h3>

        <input type="text">
        <p></p>

        <script>
            const input = document.querySelector( 'input' );
            const p = document.querySelector( 'p' );

            const x = Object.create( null );

            Object.defineProperty( x , 'message' , {
                get(){
                    return this._message ;
                },
                set(value) {
                    this._message = value ;
                    input.value = value ;
                    p.innerHTML = value ;
                }
            });

            input.addEventListener( 'input' , e => {
                x.message = e.target.value ;
            }, false );
        </script>
        
    </body>
</html>